<template>
  <div class="common-layout" v-if="!flag">
    <el-container>
      <el-header height="150px">
        <div class="block">
          <el-avatar :size="100" :src="userInfos.avater" />
        </div>
        <div class="name">{{ userInfos.userName }}</div>
        <div class="icon">
          <img class="img" src="@/assets/img/baket.png" alt="篮球" />
          <img class="img" src="@/assets/img/swmi.png" alt="游泳" />
          <img class="img" src="@/assets/img/song.png" alt="歌唱" />
          <img class="img" src="@/assets/img/rabbit.png" alt="兔子" />
          <el-button type="primary" @click="editForm(userInfos.id)"
            >编辑资料</el-button
          >
        </div>
      </el-header>
      <el-main>
        <div class="info-box">
          <div class="title">
            出生日期：<span class="info">{{
              utils.ymd(userInfos.birthday)
            }}</span>
          </div>
          <div class="title">
            性别：<span class="info">{{ userInfos.userSex }}</span>
          </div>
          <div class="title">
            手机号码：<span class="info">{{ userInfos.phone }}</span>
          </div>
          <div class="title">
            地址：<span class="info">{{ userInfos.address }}</span>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>

  <div v-if="flag">
    <el-form
      :model="userInfo"
      :rules="registRules"
      ref="registeRuleFormRef"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="userInfo.userName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="userSex">
        <el-input v-model="userInfo.userSex"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="userInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-input v-model="birth"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="userInfo.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpdate(registeRuleFormRef)"
          >保存</el-button
        >
        <el-button @click="flag = false">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useRegist } from "@/hooks/loginForm/useRegist";
import { ref, getCurrentInstance, onMounted } from "vue";
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
import utils from "@/utils/utils";

const { proxy }: any = getCurrentInstance();
const userInfo = ref<any>({});
const { registeRuleFormRef, registRules, flag } = useRegist();
const userInfos = ref<any>({});
const birth = ref("");

//点击编辑的时候 将用户信息渲染出来
const editForm = (id: number) => {
  proxy.$http.get("/user/findOne?id=" + id).then((res: any) => {
    userInfo.value = res;
    birth.value = utils.ymd(userInfo.value.birthday);
  });
  flag.value = !flag.value;
};
onMounted(() => {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
});

// 更新后 获取新信息
function getUpdateInfos() {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
}
// 更新评论区对应的姓名头像
function updateDisInfo() {
  proxy.$http.post("/discuss/updateAll/" + userInfos.value.id, {
    userName: userInfo.value.userName,
  });
}

//修改个人信息提交按钮
const submitUpdate = async (updateInfo: FormInstance | undefined) => {
  if (!updateInfo) return;
  // console.log(userInfos.value);
  await updateInfo.validate((valid) => {
    if (!valid) return;
    proxy.$http
      .post("/user/upinfos/" + userInfos.value.id, {
        userName: userInfo.value.userName,
        userSex: userInfo.value.userSex,
        phone: userInfo.value.phone,
        birthday: userInfo.value.birthday,
        address: userInfo.value.address,
      })
      .then(async (res: any) => {
        ElMessageBox.alert("你的信息保存成功", {
          confirmButtonText: "OK",
          callback: () => {
            ElMessage({
              type: "success",
              message: "提交成功",
            });
            flag.value = !flag.value;
            getUpdateInfos();
            updateDisInfo();
          },
        });
        window.sessionStorage.setItem("Infos", JSON.stringify(res.data));
      });
  });
};
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  .el-container {
    height: 100%;
    // background-color: pink;
    .el-header {
      display: flex;
      align-items: center;
      .name {
        font-size: 30px;
        margin-left: 15px;
      }
      .icon {
        flex: 1;
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: end;
        .img {
          width: 35px;
          height: 35px;
          margin: 0 5px;
        }
      }
    }
    .el-main {
      .info-box {
        display: grid;
        grid-gap: 20px;
        .title {
          font-weight: bolder;
          border-bottom: 1px solid black;
          .info {
            color: gray;
          }
        }
      }
    }
  }
}
</style>
